<template>
<div>
    <Null v-if="bookList.length === 0"></Null>
  <ClassifyList v-else :my-data="bookList"></ClassifyList>
</div>
</template>

<script setup>

import {watch, ref, onMounted} from "vue";
import {useRoute, useRouter} from "vue-router";
import ClassifyList from "../Composite/ClassifyList.vue";
import axios from "../../axios/index.js";
import {ElMessage} from "element-plus";
import Null from "../Composite/Null.vue";

const route = useRoute();
const router = useRouter();

let bookList = ref([])

const searchByValue = (val)=>{
  axios.get("/book/search/" + val).then(res=>{
    //console.log("请求了");
    if (res.data.data.length === 0) {
      ElMessage.info("没有搜索到！")
      //router.push("/")
    }
    bookList.value = res.data.data;
  }).catch(error=>{
    ElMessage.error(error)
  })
}

watch(()=>route,(newV,oldV)=>{
  //console.log("route变了");
  //console.log(route.query.query);
  if (route.query.query === null || route.query.query === '') {
    //console.log("空了");
    router.push("/")
  } else {
    //console.log(newV.path);
    //console.log(oldV);
    if (newV.path === "/search") {
      searchByValue(route.query.query)
    }
  }
},{
  //非惰性
  immediate: true,
  //深度监视
  deep: true
})

</script>

<style scoped>

</style>
